@function px2rem($px) {
  // 根元素字体为100px
  @return $px / 100 * 1rem;
}
html,
body {
  background-color: #f3f3fa;
  box-sizing: border-box;
  font-size: px2rem(30);
}
::webkit-scrollbar {
  display: none;
}

.close {
  background-color: #f3f3fa;

  .tar {
    text-align: right;
  }
  .tac {
    text-align: center;
  }
  .search {
    width: px2rem(688);
    height: px2rem(81);
    line-height: px2rem(81);
    background: #fff;
    margin: px2rem(24) auto;
    border-radius: px2rem(15);
    display: flex;
    align-items: center;
    .icon {
      width: px2rem(40);
      height: px2rem(40);
      background: url("../../assets/images/close/search.png") no-repeat;
      background-size: 100% 100%;
      margin: 0 px2rem(20);
    }
    .ipt {
      flex: 1;
      font-size: px2rem(27);
      color: #333;
      height: px2rem(81);
      line-height: px2rem(81);
      background-color: #fff;
      border-radius: px2rem(15);
    }
  }
  .list {
    background-color: #fff;
    border-radius: px2rem(31);
    padding: px2rem(31) 0;
    .header {
      display: flex;
      justify-content: space-between;
      padding-left: px2rem(31);
      padding-right: px2rem(31);
      padding-bottom: px2rem(33);
      border-bottom: px2rem(2) solid #eaecf1;
      .left {
        color: #141c30;
        font-weight: 700;
        font-size: px2rem(31);
      }
      .right {
        display: flex;
        align-items: center;
        .calendar {
          width: px2rem(40);
          height: px2rem(40);
          background: url("../../assets/images/close/calendar.png") no-repeat;
          background-size: 100% 100%;
          margin: 0 px2rem(10);
        }
        span {
          font-size: px2rem(27);
          color: #6b7388;
        }
      }
    }
    .items {
      .item {
        padding: 0 px2rem(30);
        .title,
        .dates {
          display: flex;
          justify-content: space-between;
          margin: px2rem(20) 0;
          .left {
            font-weight: 700;
            color: #141c30;
          }
          .right {
            color: #9da7c0;
            font-size: px2rem(24);
          }
        }
        .scroll-blocks {
          display: -webkit-box;
          overflow-x: scroll;
          -webkit-overflow-scrolling: touch;
          .block {
            width: px2rem(165);

            background: #f5f5f5;
            border-radius: px2rem(8);
            text-align: center;
            margin: 0 5px;
            &:nth-child(1) {
              margin-left: 0;
            }
            &:last-child {
              margin-right: 0;
            }
            .key {
              padding: px2rem(15) 0;
              font-size: px2rem(23);
              color: #9da7c0;
            }
            .value {
              font-size: px2rem(27);
              font-weight: 700;
              padding-bottom: px2rem(15);
              &.red {
                color: #e46050;
              }
            }
          }
        }
        .dates {
          border-bottom: 1px solid #eaecf1;
          padding-bottom: px2rem(30);
        }
      }
    }
  }
}
